import dash
from dash import html, dcc
import feffery_antd_components as fac
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        fac.AntdTitle(
            '方式1：利用dash.callback_context合并多个回调函数',
            level=4
        ),
        fac.AntdSpace(
            [
                fac.AntdButton(
                    '按钮1',
                    id='demo1-button1',
                    type='primary'
                ),
                fac.AntdButton(
                    '按钮2',
                    id='demo1-button2',
                    type='primary'
                ),
                fac.AntdText(
                    id='demo1-output'
                )
            ]
        ),

        fac.AntdTitle(
            '方式2：利用一组Store组件进行中转',
            level=4
        ),
        fac.AntdSpace(
            [
                fac.AntdButton(
                    '按钮1',
                    id='demo2-button1',
                    type='primary'
                ),
                fac.AntdButton(
                    '按钮2',
                    id='demo2-button2',
                    type='primary'
                ),
                html.Div(
                    [
                        dcc.Store(
                            id='demo2-button1-store'
                        ),
                        dcc.Store(
                            id='demo2-button2-store'
                        )
                    ]
                ),
                fac.AntdText(
                    id='demo2-output'
                )
            ]
        )
    ],
    style={
        'padding': '100px'
    }
)


@app.callback(
    Output('demo1-output', 'children'),
    [Input('demo1-button1', 'nClicks'),
     Input('demo1-button2', 'nClicks')]
)
def demo1(nClicks1, nClicks2):
    ctx = dash.callback_context

    if ctx.triggered[0]['prop_id'] == 'demo1-button1.nClicks':
        return f'按钮1点击次数：{nClicks1}'

    elif ctx.triggered[0]['prop_id'] == 'demo1-button2.nClicks':
        return f'按钮2点击次数：{nClicks2}'


@app.callback(
    Output('demo2-output', 'children'),
    [Input('demo2-button1-store', 'data'),
     Input('demo2-button2-store', 'data')]
)
def demo2(button1_data, button2_data):
    if button1_data or button2_data:

        ctx = dash.callback_context

        if ctx.triggered[0]['prop_id'] == 'demo2-button1-store.data':
            return f'按钮1点击次数：{button1_data["nClicks"]}'

        elif ctx.triggered[0]['prop_id'] == 'demo2-button2-store.data':
            return f'按钮2点击次数：{button2_data["nClicks"]}'


@app.callback(
    Output('demo2-button1-store', 'data'),
    Input('demo2-button1', 'nClicks')
)
def demo2_button1(nClicks):
    if nClicks:
        return {
            'nClicks': nClicks
        }


@app.callback(
    Output('demo2-button2-store', 'data'),
    Input('demo2-button2', 'nClicks')
)
def demo2_button2(nClicks):
    if nClicks:
        return {
            'nClicks': nClicks
        }


if __name__ == '__main__':
    app.run_server(debug=True)
